/* Variables to define the different variables used by LWC */
:root
{
  --colour1:#353f4c;
  --colour2:#b46724;
  --colour3:#ad9e63;
  --colour4:#f2f0df;
  --font1:Palatino;
  --font2:Arial;
}

/*Setting the body colour of the webpage to colour 4  */
Body{
  background-color:var(--colour4);
}
/* Stopping the hyperlinks from having underlines */
a {
  text-decoration: none;
}

/* ID for the logo on each page of the website */
#logo{
  width: 128px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* The flexbox for the menu on the homepage */
.choosePage{
  padding:10px;
  display:flex;
  width:80vw;
  margin-left: auto;
  margin-right: auto;
}

/* The styling for the footer that contains the Sitemap on the index... Unnecessary and/or needs work */
.footerBox{
  padding:10px;
  display:flex;
  width:80vw;
  margin-left: auto;
  margin-right: auto;
}
/* A basic class that is used throughout the choosePage flexbox to assign each item to have the same value/ratio */
.Flex1{
  flex:1;
}

/* .center{
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
} */

/* Used to float images to the left on the landing pages and info pages */
.left{
  float:left;
  width:40vw;
  padding: 10px;
  text-align: left;
}
/* Used to float images to the right on the landing pages and info pages */
.right{
  float:right;
  width:40vw;
  padding: 10px;
  text-align: left;
}

/* No longer a flexbox, instead it's used for holding the information about the section that holds the image and text for the landings. */
.landingbox{
  padding:10px;
  display:block;
  margin-left: auto;
  margin-right: auto;
}

/* Styling the image on the landing pages */
.landingInfo{
  float:left;
  width:40vw;
  padding: 10px;
}
/* Used for all pages to ensure that there is a consistent width to all pages. */
.pageContent{
  width:80vw;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
/* Setting a specific button styling to go with the W3 Css button styling */
.buttonColour{
  color:#fff !important; 
  background-color:#353f4c !important;
}
/* Styling the text on the landing pages */
#InfoContent{
  padding:10px;
}

/* Add in screen size in future iteration, if it's less than a certain size etc. set it to 100vw, if it's larger have it like this. This is used for the styling of all the images on the more info pages to keep them consistent and relative to the window*/
.moreInfoImages{
  width:30vw !important;
  min-width: 300px;
}
/* Styling for the buttons home from the more info pages */
#homeButton{
  position:relative;
  margin-left:50%;
}
/* Div styling to stop the float from above */
.homeButtonSection{
  display: block;
  clear:left;
  clear:right;
}